<!-- D:/project/app/ydz-app-uniapp/static/images/serve -->
<template>
	<view class="pagebody">
		<view class="topbox borderbox">
			<NavHeader :type="1"></NavHeader>
		</view>

		<!-- 组件1 -->
		<view class="combox" style="margin-top: -50rpx;">
			<view class="flex-row align-center" style="">
				<view class="" style="width: 8rpx;height: 40rpx;border-radius: 50rpx;background: #00D9B2;">
				</view>
				<view class=" fz40 fwbold" style="margin-left: 8rpx;color: #00D9B2;">
					为什么要定期体检？
				</view>
			</view>
			<!-- <view class="color303b39 fz36 mt30" style="line-height: 64rpx;">
				大数据调查显示，“一药难觅”的背后存在三大痛点：
			</view> -->
			<view class="mt30">
				<view class="linebox mt16">
					<view class=" flex-row align-center">
						<view class="fz24 justify-center align-center"
							style="width: 32rpx;height: 32rpx;background: #00D9B2;color: #fff;border-radius: 50%;">
							1
						</view>
						<view class="fz36 fwbold ml16" style="color: #00D9B2;">
							预防疾病
						</view>
					</view>
					<view class="color303b39 fz32 mt16" style="margin-left: 48rpx;line-height: 48rpx;">
						评估个人健康状况，及时发现潜在健康风险，从而采取预防措施，避免疾病发生。
					</view>
				</view>
				<view class="linebox mt16">
					<view class=" flex-row align-center">
						<view class="fz24 justify-center align-center"
							style="width: 32rpx;height: 32rpx;background: #00D9B2;color: #fff;border-radius: 50%;">
							2
						</view>
						<view class="fz36 fwbold ml16" style="color: #00D9B2;">
							监测慢性病
						</view>
					</view>
					<view class="color303b39 fz32 mt16" style="margin-left: 48rpx;line-height: 48rpx;">
						对于已有慢性病的患者，定期体检可以监测疾病进展，调整治疗方案，控制病情。
					</view>
				</view>
				<view class="linebox mt16">
					<view class=" flex-row align-center">
						<view class="fz24 justify-center align-center"
							style="width: 32rpx;height: 32rpx;background: #00D9B2;color: #fff;border-radius: 50%;">
							3
						</view>
						<view class="fz36 fwbold ml16" style="color: #00D9B2;">
							生活方式调整
						</view>
					</view>
					<view class="color303b39 fz32 mt16" style="margin-left: 48rpx;line-height: 48rpx;">
						体检结果可以作为调整生活方式的依据，比如饮食、运动、睡眠等，以促进健康。
					</view>
				</view>
				<view class="linebox mt16">
					<view class=" flex-row align-center">
						<view class="fz24 justify-center align-center"
							style="width: 32rpx;height: 32rpx;background: #00D9B2;color: #fff;border-radius: 50%;">
							4
						</view>
						<view class="fz36 fwbold ml16" style="color: #00D9B2;">
							提高生活质量
						</view>
					</view>
					<view class="color303b39 fz32 mt16" style="margin-left: 48rpx;line-height: 48rpx;">
						通过体检和健康管理，可以提高个人的生活质量，享受更健康、更优质的生活。
					</view>
				</view>
				<view class="linebox mt16">
					<view class=" flex-row align-center">
						<view class="fz24 justify-center align-center"
							style="width: 32rpx;height: 32rpx;background: #00D9B2;color: #fff;border-radius: 50%;">
							5
						</view>
						<view class="fz36 fwbold ml16" style="color: #00D9B2;">
							延长寿命
						</view>
					</view>
					<view class="color303b39 fz32 mt16" style="margin-left: 48rpx;line-height: 48rpx;">
						定期体检有助于延长寿命，因为许多导致早逝的疾病都可以通过早期干预来预防或控制。
					</view>
				</view>
			</view>
		</view>

		<!-- 组件2 -->
		<view class="combox">
			<view class="flex-row align-center" style="">
				<view class="" style="width: 8rpx;height: 40rpx;border-radius: 50rpx;background: #00D9B2;">
				</view>
				<view class=" fz40 fwbold" style="margin-left: 8rpx;color: #00D9B2;">
					出国体检为什么优选日本？
				</view>
			</view>
			<view class="card_div">
				<view class="card" style="padding-bottom: 24px;">
					<view class="bigyuan"></view>
					<view class="smayuan"></view>
					<view class="num">01</view>
					<view class="title fz36">先进的医疗设备
					</view>
					<view class="cardcon">
						<view class=" fz32" style="line-height: 48rpx;">
							日本体检医院配备先进的PET-CT、MRI（核磁共振）等高端医疗设备。
						</view>
					</view>
				</view>
				<view class="card" style="padding-bottom: 24px;">
					<view class="bigyuan"></view>
					<view class="smayuan"></view>
					<view class="num">02</view>
					<view class="title fz36">优质的医疗团队
					</view>
					<view class="cardcon justify-start">
						<view class=" fz32" style="line-height: 48rpx;">
							日本体检的医生团队，临床经验丰富，设备操作熟练，为您提供优质的医疗服务。
						</view>
					</view>
				</view>
				<view class="card" style="padding-bottom: 24px;">
					<view class="bigyuan"></view>
					<view class="smayuan"></view>
					<view class="num">03</view>
					<view class="title fz36">严谨的流程管理
					</view>
					<view class="cardcon justify-start">
						<view class=" fz32" style="line-height: 48rpx;">
							从预约、体检、报告解读到后续治疗，都有专业人员全程跟踪服务。
						</view>
					</view>
				</view>
				<view class="card" style="padding-bottom: 24px;">
					<view class="bigyuan"></view>
					<view class="smayuan"></view>
					<view class="num">04</view>
					<view class="title fz36">高水平服务意识
					</view>
					<view class="cardcon justify-start">
						<view class=" fz32" style="line-height: 48rpx;">
							根据个人健康状况定制体检计划，提供细致入微的人性化关怀。
						</view>
					</view>
				</view>
				<view class="card" style="border-left: 1rpx solid transparent;">
					<view class="bigyuan"></view>
					<view class="smayuan"></view>
					<view class="num">05</view>
					<view class="title fz36 ">便捷的出行体验
					</view>
					<view class="cardcon ">
						<view class=" fz32" style="line-height: 48rpx;">
							距离近，时差小，签证办理便捷，仅需2-3小时航程，旅游、体检两不误。
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 组件2 -->
		<view class="combox">
			<view class="flex-row align-center" style="">
				<view class="" style="width: 8rpx;height: 40rpx;border-radius: 50rpx;background: #00D9B2;">
				</view>
				<view class=" fz40 fwbold" style="margin-left: 8rpx;color: #00D9B2;">
					日本体检为什么要通过中介机构？
				</view>
			</view>
			<view class="card_div">
				<view class="card" style="padding-bottom: 24px;">
					<view class="bigyuan"></view>
					<view class="smayuan"></view>
					<view class="num">01</view>
					<view class="title fz36">日本医院的预约制度
					</view>
					<view class="cardcon">
						<view class=" fz32">
							大部分日本医院系统不直接对外国人群开放预约服务，需有资质的中介机构进行预约。
						</view>
					</view>
				</view>
				<!-- <view class="card" style="padding-bottom: 24px;">
					<view class="bigyuan"></view>
					<view class="smayuan"></view>
					<view class="num">02</view>
					<view class="title fz36">繁琐的出国手续
					</view>
					<view class="cardcon justify-start">
						<view class=" fz32">
							出国体检手续复杂，包括签证申请、医疗保险、住宿等，交给机构轻松享受服务
						</view>
					</view>
				</view> -->
				<view class="card" style="padding-bottom: 24px;">
					<view class="bigyuan"></view>
					<view class="smayuan"></view>
					<view class="num">02</view>
					<view class="title fz36">费用更具性价比
					</view>
					<view class="cardcon justify-start">
						<view class=" fz32">
							日本医院对外国人群的收费通常较高，中介机构往往能够为患者争取到更合理的费用。
						</view>
					</view>
				</view>
				<view class="card" style="padding-bottom: 24px;">
					<view class="bigyuan"></view>
					<view class="smayuan"></view>
					<view class="num">03</view>
					<view class="title fz36">专业医疗翻译的选择
					</view>
					<view class="cardcon justify-start">
						<view class=" fz32">
							中介机构能够提供专业的翻译服务，确保医患沟通无障碍。
						</view>
					</view>
				</view>
				<view class="card" style="border-left: 1rpx solid transparent;">
					<view class="bigyuan"></view>
					<view class="smayuan"></view>
					<view class="num">04</view>
					<view class="title fz36 ">关于后续服务
					</view>
					<view class="cardcon ">
						<view class=" fz32">
							中介机构能够提供后续服务，协助患者与医院沟通，确保患者能够得到必要的医疗服务。
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 组件4 -->
		<view class="combox">
			<view class="flex-row align-center" style="">
				<view class="" style="width: 8rpx;height: 40rpx;border-radius: 50rpx;background: #00D9B2;">
				</view>
				<view class=" fz40 fwbold" style="margin-left: 8rpx;color: #00D9B2;">
					日本体检为什么首选药队长？
				</view>
			</view>
			<view class="color303b39 mt40 fz36 mb30" style="line-height: 64rpx;text-align: justified;">
				药队长用实力守护健康，用服务温暖人心，为您的健康保驾护航：
			</view>
			<image src="../../static/images/serve/rbkbys.png" style="width: 700rpx;height: 618rpx;margin-top: 32rpx;"
				mode=""></image>
		</view>


		<view class="combox">
			<view class="flex-row align-center" style="">
				<view class="" style="width: 8rpx;height: 40rpx;border-radius: 50rpx;background: #00D9B2;">
				</view>
				<view class=" fz40 fwbold" style="margin-left: 8rpx;color: #00D9B2;">
					临床招募的流程有哪些？
				</view>
			</view>
			<view class="remindbox">
				<view class="process borderbox">
					<view class="processbox borderbox pos-rel" style="">
						<view class="pos-abs circular">
							1
						</view>
						<view class="fz32 fwbold mb10" style="color: #00D9B2;line-height: 40rpx;">
							咨询
						</view>
						了解体检的具体项目、费用、流程以及注意事项等。
					</view>
					<view class="processbox borderbox pos-rel" style="">
						<view class="pos-abs circular">
							2
						</view>
						<view class="fz32 fwbold mb10" style="color: #00D9B2;line-height: 40rpx;">
							行程定制
						</view>
						根据个人情况和需求，定制合适的体检行程。
					</view>
					<view class="processbox borderbox pos-rel">
						<view class="pos-abs circular">
							3
						</view>
						<view class="fz32 fwbold mb10" style="color: #00D9B2;line-height: 40rpx;">
							医院预约
						</view>
						日本实行“预约制”，需提前预约体检医院及时间。
					</view>
					<view class="processbox borderbox pos-rel">
						<view class="pos-abs circular">
							4
						</view>
						<view class="fz32 fwbold mb10" style="color: #00D9B2;line-height: 40rpx;">
							签证办理
						</view>
						如果是体检+旅游，办理旅游签证即可。
					</view>
					<view class="processbox borderbox pos-rel">
						<view class="pos-abs circular">
							5
						</view>
						<view class="fz32 fwbold mb10" style="color: #00D9B2;line-height: 40rpx;">
							机票酒店预定
						</view>
						提前预定往返日本的机票和住宿酒店。
					</view>
					<view class="processbox borderbox pos-rel">
						<view class="pos-abs circular">
							6
						</view>
						<view class="fz32 fwbold mb10" style="color: #00D9B2;line-height: 40rpx;">
							体检+翻译
						</view>
						体检当天，专业日语医疗翻译全程陪同。
					</view>
					<view class="processbox borderbox pos-rel">
						<view class="pos-abs circular">
							7
						</view>
						<view class="fz32 fwbold mb10" style="color: #00D9B2;line-height: 40rpx;">
							翻译报告
						</view>
						专业医学顾问为您提供报告翻译。
					</view>
					<view class="processbox borderbox pos-rel"
						style="padding-bottom: 0;border-left: 1rpx solid transparent;">
						<view class="pos-abs circular">
							8
						</view>
						<view class="fz32 mb10 fwbold" style="color: #00D9B2;line-height: 40rpx;">
							报告邮寄
						</view>
						体检报告译后会通过邮件或快递方式寄送给您。
					</view>
				</view>
			</view>
		</view>


		<view class="combox">
			<view class="flex-row align-center" style="">
				<view class="" style="width: 8rpx;height: 40rpx;border-radius: 50rpx;background: #00D9B2;">
				</view>
				<view class=" fz40 fwbold" style="margin-left: 8rpx;color: #00D9B2;">
					日本体检医院推荐
				</view>
			</view>
			<view class="doctlist" v-for="(item,index) in hospitalList" :key="index">
				<view class="doctitem flex-row" @click="tohosdetail(item.id)">
					<view class="imgbox" :style="{ background: 'url(' + item.url + ') no-repeat' }">
					</view>
					<view class="docthing flex1">
						<view class="color303b39" style="font-weight: 800;font-size: 36rpx;line-height: 48rpx;">
							{{item.hospitalName?item.hospitalName:'未知'}}
						</view>
						<view class="br8 mt16"
							style="width:100%;height: 98rpx;padding: 8rpx 16rpx;background: #EDFCF9;color: #00977C;">
							<view class="fz28 lineclamp2" style="line-height: 40rpx;">
								<span class="fwbold">地址：</span>:{{item.hospitalAddress?item.hospitalAddress:'暂无'}}
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>


		<!-- 组件7 -->
		<view class="combox">
			<view class="flex-row align-center" style="">
				<view class="" style="width: 8rpx;height: 40rpx;border-radius: 50rpx;background: #00D9B2;">
				</view>
				<view class=" fz40 fwbold" style="margin-left: 8rpx;color: #00D9B2;">
					客户说
				</view>
			</view>
			<view class="mt40"
				style="padding: 32rpx 24rpx 24rpx; background: linear-gradient( 125deg, #F5FEFC 0%, #E7FCF8 100%);border-radius: 24rpx;">
				<view class="color303b39 fz36 fwbold" style="line-height: 56rpx;">
					“早一步发现，早一步干预。日本精密体检是对未来最好的投资。”
				</view>
				<view class="justify-end" style="color: #576260;">
					—— 解先生
				</view>
			</view>
			<view class="mt30"
				style="padding: 32rpx 24rpx 24rpx; background: linear-gradient( 125deg, #F5FEFC 0%, #E7FCF8 100%);border-radius: 24rpx;">
				<view class="color303b39 fz36 fwbold" style="line-height: 56rpx;">
					“服务贴心不排队，项目细致又全面，这次日本体检真安心!”
				</view>
				<view class="justify-end" style="color: #576260;">
					—— 翟先生
				</view>
			</view>
			<view class="mt30"
				style="padding: 32rpx 24rpx 24rpx; background: linear-gradient( 125deg, #F5FEFC 0%, #E7FCF8 100%);border-radius: 24rpx;">
				<view class="color303b39 fz36 fwbold" style="line-height: 56rpx;">
					“环境舒适，私密性好，服务细节很到位，没想到体检也能很享受。”
				</view>
				<view class="justify-end" style="color: #576260;">
					—— 马女士
				</view>
			</view>
			<view class="mt30"
				style="padding: 32rpx 24rpx 24rpx; background: linear-gradient( 125deg, #F5FEFC 0%, #E7FCF8 100%);border-radius: 24rpx;">
				<view class="color303b39 fz36 fwbold" style="line-height: 56rpx;">
					“精密仪器+专家解读，揪出隐藏风险，这份深度筛查值了!”
				</view>
				<view class="justify-end" style="color: #576260;">
					—— 翟女士
				</view>
			</view>
		</view>

		<!-- 组件7 -->
		<zxkfcom></zxkfcom>


		<FixedFoot :typeid="3"></FixedFoot>
	</view>
</template>

<script>
	import FixedFoot from '../../layouts/fixedfoot.vue';
	import NavHeader from '../../layouts/navheader.vue';
	import zxkfcom from '../../components/generalcom/zxkfcom.vue';
	import {
		leaveBoardAdd,
		getHospitalList
	} from '@/api/api.js'
	export default {
		components: {
			FixedFoot,
			NavHeader,
			zxkfcom
		},
		onLoad() {

		},
		data() {
			return {
				placeholderStyle: "color:#7E8987;font-size:32rpx;font-weight: 400;",
				textareaStyle: "color:#7E8987;font-size:32rpx;font-weight: 400;",
				hospitalList:[],
				leaveBoard: {
					name: '',
					tel: '',
					content: ''
				}
			}
		},
		mounted() {
			this.getHospitalList()
		},
		methods: {
			getHospitalList() {
				let param = {
					"pageNum": 1,
					"pageSize": 3,
					"orderByColumn" : "create_time",
					"isAsc":"desc",
				}
			    getHospitalList(param).then(response => {
					this.hospitalList = response.rows
			   })
			},
			tohosdetail(id){
				uni.navigateTo({
					url:'/pages/knowledge/hosdetail?id='+id
				})
			},
			submit() {
				// 正则表达式
				if (this.leaveBoard.tel != '') {
					if (!(/^1[3456789]\d{9}$/.test(this.leaveBoard.tel))) {
						this.$modal.msgError("手机号码格式错误，请重新输入")
						return false;
					}
				} else {
					this.$modal.msgError("请输入手机号码")
					return false;
				}
				leaveBoardAdd(this.leaveBoard).then(res => {
					if (res.code == 200) {
						this.$modal.msgSuccess("预约成功，客服人员将会与您联系。")
						this.leaveBoard = {
							name: '',
							tel: '',
							content: ''
						}
					} else if (res.code == 500) {
						// 重复提交！！！
						this.$modal.msgSuccess("已预约成功，请勿重复预约。")
						this.leaveBoard = {
							name: '',
							tel: '',
							content: ''
						}
					}
				});
			},
		},
		created() {},
	}
</script>

<style lang="scss" scoped>
	::v-deep .is-input-border {
		height: 90rpx;
		border-radius: 16rpx;
		border: 1rpx solid #D7DDDC;
	}

	::v-deep .uni-input-wrapper {
		font-size: 32rpx;
	}

	::v-deep .uni-easyinput__content-input {
		padding: 0 33rpx;
	}

	::v-deep .u-input__textarea {
		font-size: 32rpx;
		padding: 21rpx 0;
	}

	.pagebody {
		padding-bottom: 136rpx;
		background: #F0F6F5;

		.topbox {
			height: 547rpx;
			background: url('../../static/images/serve/rbtjpagebg.png') no-repeat;
			background-size: cover;
			padding: 36rpx 24rpx;
		}

		.combox {
			padding: 48rpx 24rpx 56rpx;
			background: #fff;
			border-radius: 32rpx;
			margin-top: 16rpx;

			.linebox {
				background: linear-gradient(125deg, #F5FEFC 0%, #E7FCF8 100%);
				border-radius: 24rpx;
				padding: 32rpx 24rpx;

			}

			// 组件2
			.card_div {
				padding: 24rpx;
				border-radius: 24rpx;

				.card {
					border-left: 1rpx dashed #80dbe4;
					position: relative;

					.smayuan {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						background: #00D9B2;
						position: absolute;
						border: 2rpx solid rgba(2, 183, 202, 0.1);
						z-index: 3;
						top: 8rpx;
						left: -8rpx;
					}

					.bigyuan {
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						background-color: #e6f8fa;
						border: 4rpx solid rgba(2, 183, 202, 0.10);
						position: absolute;
						left: -16rpx;
					}

					.num {
						width: 30rpx;
						height: 24rpx;
						font-size: 36rpx;
						font-family: Microsoft YaHei-Bold, Microsoft YaHei;
						font-weight: bold;
						color: #00D9B2;
						line-height: 32rpx;
						margin-left: 24rpx;
					}

					.title {
						font-weight: bold;
						color: #303B39;
						position: absolute;
						top: -10rpx;
						left: 80rpx;
					}

					.material_title {
						color: #333333;
						position: absolute;
						top: -5rpx;
						left: 66rpx;
					}

					.cardcon {
						background: #f8f8f8;
						border-radius: 16rpx;
						padding: 16rpx 16rpx 16rpx 24rpx;
						margin-top: 32rpx;
						margin-left: 60rpx;
						font-weight: 400;
						color: #323434;
					}


					.materials_remark {
						height: 14rpx;
						font-family: Microsoft YaHei-Regular, Microsoft YaHei;
						font-weight: 400;
						color: #666666;
						line-height: 14rpx;
						margin-left: 60rpx;
						margin-top: 24rpx;
					}
				}
			}

			// 组件7
			.comcard {
				margin-bottom: 32rpx;
				width: 343rpx;
				height: 400rpx;
				background: linear-gradient(180deg, rgba(0, 255, 209, 0.1) 0%, rgba(0, 255, 209, 0) 100%);
				box-shadow: inset 0px 0px 24px 0px rgba(183, 255, 238, 0.5);
				border-radius: 24px 24px 24px 24px;
				border-image: linear-gradient(180deg, rgba(221, 253, 243, 0.5), rgba(160, 244, 229, 0.5)) 1 1;
			}

			.doctlist {
				padding: 40rpx 24rpx 0;
				background: #fff;
				overflow: hidden;
				border-radius: 32rpx;

				.doctitem {
					margin-bottom: 40rpx;
					.imgbox{
						height: 248rpx;
						width: 248rpx;
						background-size: cover !important;
						border-radius: 24rpx 24rpx 0 0;
						
					}

					.docthing {
						padding: 19rpx 0;
						margin-left: 18rpx;
			
				
					}
				}
			}
		}

		.formbox {
			box-sizing: border-box;
			padding-top: 32rpx;
			background: #fff;
			border-radius: 32rpx;
			margin-top: 16rpx;

			.title {
				position: relative;
				width: max-content;
				padding: 0 16rpx;

				.titleline {
					bottom: 0;
					left: 0;
					height: 16rpx;
					width: 100%;
					background: #00D9B2;
					border-radius: 50rpx;
					z-index: 1;
				}
			}

			.formcontent {
				box-sizing: border-box;
				padding: 32rpx;

				.loginbtn {
					margin-top: 32rpx;

					uni-button {
						border-radius: 98rpx;
						width: 100%;
					}

					uni-button:after {
						border: none;
					}

					.button {
						background-color: #00D9B2;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 36rpx;

					}
				}
			}
		}

		.remindbox {
			margin-top: 16rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 32rpx;

			.process {
				padding: 29rpx 32rpx 0 50rpx;

				.processbox {
					padding: 0 20rpx 48rpx 38rpx;
					border-left: 1rpx dashed #00D9B2;
					font-weight: 500;
					font-size: 32rpx;
					color: #303B39;
					line-height: 56rpx;

					.circular {
						position: absolute;
						left: -18rpx;
						top: 0;
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						background: #00D9B2;
						color: #fff;
						font-size: 28rpx;
						text-align: center;
						line-height: 36rpx;
					}
				}
			}
		}

	}
</style>